<template>
  <template v-if=" User!=null ">
    <van-cell-group>
      <van-cell title="账号" :value="User.userAccount"/>
      <van-cell title="密码" is-link to="/user/edit" :value="User.password"
                @click="toEdit('userPassword', '密码', User.password)"/>
      <van-cell title="当前角色"  :value="User.userRole"/>
    </van-cell-group>
  </template>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref, onActivated} from "vue";
import {showFailToast} from "vant";
import {getCurrentUser} from "../../sevices/User.ts";
import 'vant/lib/index.css';

const router = useRouter();

const User = ref();

// 封装获取用户信息的方法（复用）
const fetchUserInfo = async () => {
  const result = await getCurrentUser();
  if (result) {
    User.value = result;
    // 用户角色转换
    User.value.userRole = result.userRole === 0 ? '普通用户' : '管理员';
  } else {
    showFailToast('获取用户信息失败');
  }
};

// 首次挂载时执行
onMounted(() => {
  fetchUserInfo();
});

// 关键：返回页面时（无论是否缓存），重新获取数据
onActivated(() => {
  fetchUserInfo(); // 强制刷新最新数据
});

/**
 * 跳转到编辑页面
 * @param editKey
 * @param editName
 * @param editValue
 */
const toEdit = (editKey: string, editName: string, editValue: string) => {
  router.push({
    path: '/user/editPassword',
    query: {
      editKey,
      editValue,
      editName
    }
  });
}

</script>

<style scoped>

</style>